<template>
  <div class="bigbox">
    <div>
      <video
        class="wesd"
        ref="video"
        width="100%"
        height="100%"
        autoplay
      ></video>
    </div>
  </div>
</template>

<script>
export default {
  name: "components",
  data() {
    return {};
  },
  mounted: function() {
    this.callCamera(); //需要触发的函数
  },
  methods: {
    // 调用摄像头
    callCamera() {
      // H5调用电脑摄像头API
      navigator.mediaDevices
        .getUserMedia({
          video: true
        })
        .then(success => {
          // 摄像头开启成功
          this.$refs["video"].srcObject = success;
          // 实时拍照效果
          this.$refs["video"].play();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.bigbox {
  width: 100%;
  height: 100%;
  padding: 20px;
}
video {
  width: 450px;
  height: 400px;
  border: 1px solid #ccc;
}
</style>
